<template>
  <el-container @keyup.enter.native="handleLogin">
    <el-header>
      <img class="logo" src="@/assets/images/logo.png">
    </el-header>
    <el-main>
      <el-row class="content">
        <el-col :span="12" class="hidden-sm-only">&nbsp;</el-col>
        <el-col :span="12">
          <div class="loginBox">
            <div class="title">商户中心管理系统</div>
            <el-form ref="loginForm" :rules="loginRules" :model="loginForm" status-icon>
              <el-form-item prop="userName">
                <el-input v-model="loginForm.userName" placeholder="请输入用户名" prefix-icon="el-icon-user"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"/>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-input v-model="loginForm.captcha" placeholder="请输入验证码" prefix-icon="el-icon-message" style="width:60%"/>
                <el-image :src="captchaImg" class="fr pointer" style="margin-right: 20px;" @click="generateCaptcha"/>
              </el-form-item>
              <el-form-item>
                <el-button :loading="loading" type="success" class="submit" @click="handleLogin">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="footer">
      <span>Copyright © 2020-2025 www.yyjsr.com 版权所有 长沙商脉科技有限公司 湘ICP备20014269号 </span>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loading: false, captchaImg: undefined, loginForm: { userName: '', password: '', captcha: '' },
      loginRules: {
        userName: [{ required: true, trigger: 'blur', message: '用户名不能为空!' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空!' }],
        captcha: [{ required: true, trigger: 'blur', message: '验证码不能为空!' }]
      }
    }
  },
  created() {
    this.generateCaptcha()
  },
  methods: {
    handleLogin() {
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
            this.generateCaptcha()
          })
        }
      })
    },
    generateCaptcha() {
      this.captchaImg = process.env.HOST + '/captcha.svl?t=' + new Date().getTime()
    }
  }
}
</script>

<style type="text/css">
.el-header{height: auto !important;margin-bottom:30px;}
.logo {margin-left: 200px;margin-top: 30px;height:70px;}
.content {
	background:url('/static/bg002.png') no-repeat;
  background-size: cover;
}
.logoImg {margin:50px;display: none;}
.loginBox {width: 350px;height: 300px;padding: 40px 50px;border-radius: 4px;opacity: 1;background: rgba(0,0,0,0.7);margin: 150px auto;}
.loginBox .title {font-size: 2.5em;font-family: 楷体;margin-bottom: 30px;color:#FFFFFF;font-weight:bold;}
.loginBox .submit {display: inline-block;width: 100%;height:50px;font-size:20px;}
.footer {height: 102px;line-height: 102px;text-align:center;color: #646464;}
.el-main{padding:0}
</style>
